<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
</head>
<body>
         <div class="container">
             <div>11</div>
             <div>22</div>
             <div>33</div>
             <div>44</div>
         </div>
<script>
    // //创建节点
    // var div = document.createElement('div');
    // div.id = 'mydiv';
    // div.className = 'box'
    // div.innerHTML = '我是美瘦嘟';
    // console.log(div);
    //
    // //使用appendChild 将节点插入到指定节点的最后一个孩子之后
    // var container = document.querySelector('.container');
    // container.appendChild(div);

    //使用insertBefore将节点插入到指定节点之前
    var newdiv = document.createElement('div');
    newdiv.innerHTML = '我是新的节点';
    var container = document.querySelector('.container');
    console.log(container.children);
    //此处的 children 里有 4 个元素
    container.insertBefore(newdiv,container.children[0]);
    // 此处的 children 里有 5 个元素(上面新插了一个), 0 号元素是 新节点
    // 1 号元素是 11, 2号节点是 22, 所以是插入到 22 之前.
    container.insertBefore(newdiv,container.children[2]);
</script>
</body>
</html>

